<template>
  <div class="container">
    <scroll-view :scroll-y="true" :style="{'height': '100%'}" @scroll="scroll">
      <div class="top" :class="status_top == 88?'top1':''">
        <img src="/static/teeth/bg_wallet.jpg" class="bj" />
        <div class="nav" :class="status_top == 88?'nav1':''">
          <div class="backBtn" @click="backBtn">
            <img
              v-if="imgUrl"
              :src="imgUrl+'h5_images/mp_images/mp_3.1.6/wallet/ic_back_white%403x.png'"
              alt
              class="img"
            />
          </div>
          <div class="navigate_title">钱包</div>
        </div>
        <div class="jbbox jbbox1">
          <div class="top_main">
            <div class="left all_money">
              <span>待提现总余额（元）</span>
              <span class="num">680000.00</span>
            </div>
            <div class="right all_money">
              <a href="/pages/package_mine/card_centry/main" class="card_btn">
                <img class="icon" src="/static/teeth/icon_01.png" />
                卡包
              </a>
              <a href="/pages/package_mine/cash_out/main" class="card_btn">
                <img class="icon" src="/static/teeth/icon_02.png" />
                提现
              </a>
            </div>
          </div>
          <div class="money_box">
            <div class="month_money">
              本月获得
              <span>680.00</span>
            </div>
            <div class="month_money">
              等待结算
              <span>680.00</span>
            </div>
          </div>
        </div>
      </div>
      <div class="reward_main">
        <div class="reward_box">
          <div class="title">
            <div class="left">
              <div class="icon tuijian">
                <img src="/static/teeth/icon_03.png" />
              </div>推荐奖励
            </div>
            <img
              :src="img_baseurl+'/mp_3.1.6/zone/xxhdpi/me_ic_into.png'"
              v-if="img_baseurl"
              alt
              class="jiantou"
            />
          </div>
          <div class="infor">
            <div class="item">
              已入账
              <span>680.00</span>
            </div>
            <div class="item">
              待入账
              <span>680.00</span>
            </div>
            <div class="item">
              累计入账
              <span>680.00</span>
            </div>
          </div>
        </div>
        <div class="reward_box">
          <div class="title">
            <div class="left">
              <div class="icon shangcheng">
                <img src="/static/teeth/icon_04.png" />
              </div>商城奖励
            </div>
            <img
              :src="img_baseurl+'/mp_3.1.6/zone/xxhdpi/me_ic_into.png'"
              v-if="img_baseurl"
              alt
              class="jiantou"
            />
          </div>
          <div class="infor">
            <div class="item">
              已入账
              <span>680.00</span>
            </div>
            <div class="item">
              待入账
              <span>680.00</span>
            </div>
            <div class="item">
              累计入账
              <span>680.00</span>
            </div>
          </div>
        </div>
      </div>
    </scroll-view>
  </div>
</template>
<script>
import common from "@/assets/js/mmk_common.js";
let timer
export default {
  data () {
    return {
      imgUrl: "https://img.ameimeika.com/",
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/",
      img_baseurl: common.image_resource,
      list: "",
      coin: 0,
      total_already_credit: 0, //累计提现
      ismask: false,
      isPopup: false,
      msgPopup: false,
      jb_num: 0, //金币数
      yb_num: 0, //银币数
      maxGold: 0, //最大金币值
      sendMsg: "获取验证码",
      tel: "",
      interval: "",
      errTip: false,
      phone: "", //手机号后四位
      code: "",
      picFocusStatus: false,
      isRed: false, //确认兑换按钮的样式控制
      popData: "",
      ismask1: false,
      isPopup1: false,
      adlist: "",
      status_top: "",
      province_id: 0,
      advertList: [],
      isAdvert: false,
      currentIndex: -1,
      chooseId: "",
      isClosed: false,
      day: "",
      hou: "",
      min: "",
      sec: "",
      iscountDown: false,
      notice_url: "",
      //   是否通知弹框
      show_notice: false,
      notice_num: 15,
      isLineUp:false,   //排队弹框
      tipsPop:'',
      is_withdraw:0
    };
  },
  methods: {
    getWithdrawaltips () {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      common.fly_post(
        "api/v4_6/activity/withdrawaltips",
        {},
        msg => {
          wx.hideLoading();
          let res = msg.data;
          if (res.status_code == 0) {
            this.tipsPop = res.data.tips;
          } else {
            // wx.hideLoading();
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
              mask: true
            });
            return false;
          }
        }
      );
    },
    getData () {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      let position_data;
      if (wx.getStorageSync("province_info")) {
        position_data = JSON.parse(wx.getStorageSync("province_info"));
        this.province_id = position_data.province_id
      }
      // console.log(position_data);
      common.fly_post(
        "/api/v4_6/user_wallet/index",
        {
          province_id: this.province_id
        },
        msg => {
          wx.hideLoading();
          let res = msg.data;
          if (res.status_code == 0) {
            this.list = res.data;
            this.coin = res.data.extract_credit; //可提现积分
            this.total_already_credit = res.data.total_already_credit;
            this.maxGold = this.list.all_gold;
            this.notice_url = res.data.noticeImage
            this.is_withdraw = res.data.is_withdraw

          } else {
            // wx.hideLoading();
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
              mask: true
            });
            return false;
          }
        }
      );
    },
    goWallet(){
      if(this.is_withdraw==0){
        this.isLineUp=true
      }else{
        wx.navigateTo({
                  url: "/pages/package_mine/line_up/main"
                });
      }
    },
    // 去提现
    to_cashOut () {
      let that = this;
      //  wx.navigateTo({
      //             url: "/pages/package_mine/line_up/main?coin_num=" + this.coin
      //           });
      
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      common.fly_post(
        "/api/com.mmk.member.api.OpenUserWithdrawalsProvider/1.0.0/signedXB.html",
        {
          id: wx.getStorageSync("user_id") || 0
        },
        msg => {
          wx.hideLoading();
          let res = msg.data;
          if (res.code == 0) {
            that.isLineUp=false
            switch (res.data) {
              case 0:
                // 未签约
                // wx.showModal({
                //   title: "", //提示的标题,
                //   content: "提现需进行进行税务代缴协议签约，是否确定进行签约？", //提示的内容,
                //   showCancel: true, //是否显示取消按钮,
                //   cancelText: "取消", //取消按钮的文字，默认为取消，最多 4 个字符,
                //   cancelColor: "#000000", //取消按钮的文字颜色,
                //   confirmText: "确定", //确定按钮的文字，默认为取消，最多 4 个字符,
                //   confirmColor: "#F64665", //确定按钮的文字颜色,
                //   success: res => {
                //     if (res.confirm) {
                //       console.log("用户点击确定  去签约");

                //     } else if (res.cancel) {
                //       console.log("用户点击取消");
                //     }
                //   }
                // });
                
                that.to_sign();
                break;
              case 1:
                // 已签约
                //跳转到提现页
                wx.navigateTo({
                  url: "/pages/package_mine/cash_out/main?coin_num=" + this.coin
                });
                break;

              default:
                break;
            }
          } else {
            wx.hideLoading();
            wx.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000,
              mask: true
            });
            return false;
          }
        },
        "isJava"
      );
    },
    // 判断是否签约跳转h5
    to_sign () {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      common.fly_post(
        "/api/com.mmk.member.api.OpenUserWithdrawalsProvider/1.0.0/xbApiUserSign.html",
        {
          id: wx.getStorageSync("user_id") || 0
        },
        msg => {
          wx.hideLoading();
          let res = msg.data;
          if (res.code == 0 || res.code == "6001") {
            let ident_url = res.data.data;
            wx.showModal({
              title: "", //提示的标题,
              content: "提现需进行进行税务代缴协议签约，是否确定进行签约？", //提示的内容,
              showCancel: true, //是否显示取消按钮,
              cancelText: "取消", //取消按钮的文字，默认为取消，最多 4 个字符,
              cancelColor: "#000000", //取消按钮的文字颜色,
              confirmText: "确定", //确定按钮的文字，默认为取消，最多 4 个字符,
              confirmColor: "#F64665", //确定按钮的文字颜色,
              success: res => {
                if (res.confirm) {
                  wx.navigateTo({
                    url: `/pages/package_mine/sign_contract/main?url=${ident_url}`
                  });
                  console.log("用户点击确定  去签约");
                } else if (res.cancel) {
                  console.log("用户点击取消");
                }
              }
            });
          } else if (res.code == "6002") {
            // let protocal_url = encodeURIComponent(
            //   `https://integration.esign.xinshuiguanjia.com/?accountId=${
            //     res.data
            //   }`
            // );
            let protocal_url = res.data.data;
            wx.navigateTo({
              url: `/pages/advertisement/main?url=${protocal_url}`
            });
          } else {
            wx.hideLoading();
            wx.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000,
              mask: true
            });
          }

          //   switch (res.code) {
          //     case 0:
          //       let protocal_url = encodeURIComponent(`https://integration.esign.xinshuiguanjia.com/?accountId=${res.data}`)
          //       console.log(protocal_url);
          //       wx.navigateTo({ url: `/pages/advertisement/main?url=${protocal_url}` });
          //       break;
          //     case 1007:
          //       let ident_url = 'https://h5.ameimeika.com/Identification/index.html'
          //       wx.navigateTo({ url: `/pages/sign_contract/main?url=${ident_url}` });
          //       break;

          //     default:

          //       wx.hideLoading();
          //       wx.showToast({
          //         title: res.msg,
          //         icon: "none",
          //         duration: 2000,
          //         mask: true
          //       });
          //       break;
          //   }
        },
        "isJava"
      );
    },
    tips () {
      let that = this;
      wx.showModal({
        title: "",
        content: "已累计提现：¥ " + that.total_already_credit,
        showCancel: false,
        confirmText: "我知道了",
        confirmColor: "#FF383E"
      });
    },
    // prompt () {
    //   wx.showModal({
    //     title: "",
    //     content: "含有活动积分、补贴积分 ",
    //     showCancel: false,
    //     confirmText: "我知道了",
    //     confirmColor: "#FF383E",
    //     success: function (res) {
    //       if (res.confirm) {
    //       }
    //     }
    //   });
    // },
    backBtn () {
      wx.navigateBack({
        delta: 1
      });
    },
    get_gold (e) {
      this.jb_num = "";
      this.jb_num = e.target.value;
      if (e.target.value > this.maxGold) {
        return;
      } else {
        this.yb_num = e.target.value * 5;
      }
    },
    // 开启通知
    shownotice () {
      let that = this
      if (this.notice_url && this.notice_url != "") {
        this.show_notice = true
        this.notice_num = 14
        timer = setInterval(() => {
          that.notice_num--
          if (that.notice_num <= 0) {
            that.notice_num = 15
            clearInterval(timer)
          }
        }, 1000);
      } else {
        this.exchange()
      }


    },
    exchange () {
      let that = this
      if (that.notice_num < 15) {
        return
      }
      // 去兑换
      this.show_notice = false
      this.jb_num = 0;
      this.yb_num = 0;
      this.ismask = true;
      this.isPopup = true;
    },
    focusfns () {
      this.jb_num = "";
    },
    closeBtn () {
      this.code = "";
      this.errTip = false;
      this.ismask = false;
      this.isPopup = false;
      this.msgPopup = false;
      this.isRed = false;
      this.$forceUpdate()
    },
    sendEvent () {
      if (this.jb_num == 0 || this.jb_num > this.maxGold) {
        return false;
      }
      console.log("ggg");
      this.code = "";
      this.ismask = true;
      this.msgPopup = true;
      var that = this;
      that.timing = 60;
      that.interval = setInterval(function () {
        if (--that.timing > 0) {
          that.sendMsg = that.timing + "s重新发送";
        } else {
          that.sendMsg = "重新发送";
          // that.isDisabled = false;
          clearInterval(that.interval);
        }
      }, 1000);
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      common.fly_post(
        "/api/v4_5/order_gold/sms_code",
        {
          phone: this.tel
        },
        msg => {
          wx.hideLoading();
          let res = msg.data;
          if (res.status_code == 0) {
            common.mmk_Loading(2, "短信已发送至你的手机,注意查收");
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    sendMore () {
      //重新发送
      this.sendEvent();
    },
    // 金币兑换银币提交事件
    confirmEvent () {
      common.mmk_Loading(0);
      common.fly_post(
        "/api/v4_5/user_wallet/exchange",
        {
          gold_coin: this.jb_num
        },
        msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          if (res.status_code == 0) {
            this.ismask = false;
            this.isPopup = false;
            this.msgPopup = false;
            common.mmk_Loading(2, "兑换成功");
            setTimeout(() => {
              this.getData();
            }, 1500);
          } else {
            common.mmk_Loading(2, res.msg);
          }
        }
      );
    },
    OnEnter () {
      this.jb_num = "";
    },
    getCode () {
      //验证手机号
      console.log(this.code);
      if (!this.code || this.code.length < 6) {
        return;
      }
      common.mmk_Loading(0);
      common.fly_post(
        "/api/v4_5/order_gold/confirm_code",
        {
          phone: this.tel,
          code: this.code
        },
        msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          if (res.status_code == 0) {
            this.confirmEvent(); //兑换金银币
            this.ismask = false;
            this.msgPopup = false;
          } else if (res.status_code == -1) {
            //验证码错误
            this.errTip = true;
          } else {
            common.mmk_Loading(2, res.msg);
          }
        }
      );
    },
    scroll (e) {
      // console.log(e.mp.detail.scrollTop)
    },
    //轮播图跳转
    to_detail (item) {
      //轮播图跳详情页
      common.to_detail(item);
    },
    // 去提速
    to_speed () {
      wx.navigateTo({
        url: "/pages/package_mine/plus_speed/main"
      });
    },
    //轮播图跳转
    to_detail1 (item) {
      //轮播图跳详情页
      console.log("---284");
      common.to_detail(item);
    },
    getpop_advert () {
      common.mmk_Loading(0);
      common.fly_post("/api/v4_5/wallet_index/pop_advert", "", msg => {
        common.mmk_Loading(1);
        let res = msg.data;
        if (res.status_code == 0 && res.data[0]) {
          this.adlist = this.imgUrl + res.data[0].image;
          // console.log(this.adlist+'--295')
          this.popData = res.data[0];
          // this.adlist= 'https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/right.png'
          console.log(this.adlist);
          if (this.adlist) {
            this.isPopup1 = true;
            this.ismask1 = true;
          } else {
            this.isPopup1 = false;
            this.ismask1 = false;
          }
        } else {
          common.mmk_Loading(2, res.msg);
        }
      });
    },
    closeBtn1 () {
      this.ismask1 = false;
      this.isPopup1 = false;
    },
    // 倒计时
    countDown: function () {
      var that = this;
      var nowTime = new Date().getTime(); //现在时间（时间戳）
      var endTime = that.advertList[0].due_time * 1000; //结束时间（时间戳）
      var time = (endTime - nowTime) / 1000; //距离结束的毫秒数
      // 获取天、时、分、秒
      let day = parseInt(time / (60 * 60 * 24));
      let hou = parseInt((time % (60 * 60 * 24)) / 3600);
      let min = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
      let sec = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
      // console.log(day + "," + hou + "," + min + "," + sec)
      (day = that.timeFormin(day)),
        (hou = that.timeFormin(hou)),
        (min = that.timeFormin(min)),
        (sec = that.timeFormin(sec));
      (that.day = that.timeFormat(day)),
        (that.hou = that.timeFormat(hou)),
        (that.min = that.timeFormat(min)),
        (that.sec = that.timeFormat(sec));
      // 每1000ms刷新一次
      if (time > 0) {
        that.iscountDown = true;
        setTimeout(this.countDown, 1000);
      } else {
        that.iscountDown = false;
        // wx.showTabBar();
        that.isAdvert = false;
      }
    },
    //小于10的格式化函数（2变成02）
    timeFormat (param) {
      return param < 10 ? "0" + param : param;
    },
    //小于0的格式化函数（不会出现负数）
    timeFormin (param) {
      return param < 0 ? 0 : param;
    },
    getAdvert () {
      let that = this;
      common.fly_post("/api/v4_5/reward_index/pop_advert", {}, result => {
        let res = result.data;
        that.advertList = res.data;

        if (that.advertList.length > 0) {
          console.log(123, that.advertList.length)
          // wx.hideTabBar();
          that.isAdvert = true;
          that.countDown();
        }
      });
    },
    // closeBtn() {
    //   // wx.showTabBar();
    //   this.isAdvert = false;
    //   this.currentIndex = -1;
    //   this.chooseId = ''
    //   this.iscountDown = false
    //   // this.isClosed = true;
    //   // this.submitBtn();
    // },
    choosePlan (index, id) {
      this.currentIndex = index;
      this.chooseId = id;
    },
    submitBtn () {
      // let chooseId = "";
      // if (this.isClosed == true) {
      //   chooseId = 3;
      // } else {
      //   chooseId = this.chooseId;
      // }
      if (!this.chooseId) {
        wx.showToast({
          title: "请选择方案",
          icon: "none",
          duration: 2000,
          mask: true
        });
        return;
      }
      common.fly_post(
        "/api/com.mmk.reservation.api.OpenTempAllowanceApplyProvider/1.0.0/processedApply.html",
        {
          id: parseInt(this.chooseId)
        },
        msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          if (res.code == 0) {
            wx.showToast({
              title: "提交成功",
              icon: "none",
              duration: 2000,
              mask: true
            });
            // wx.showTabBar();
            this.isAdvert = false;
          } else {
            common.mmk_Loading(2, res.msg);
          }
        },
        "isJava"
      );
    },
    to_transfer () {
      wx.navigateTo({ url: '/pages/package_mine/gold_transfer/main' });
    }
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: "钱包"
    });
    wx.setNavigationBarColor({
      frontColor: "#ffffff", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#fff", //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });
    this.tel = wx.getStorageSync("user_data").username;
    this.phone = this.tel.slice(-4);
    // console.log(this.phone);
    let that = this;
    wx.getSystemInfo({
      success: function (res) {
        console.log(res.statusBarHeight);
        that.status_top = res.statusBarHeight;
        //  console.log(that.status_top)
      }
    });

    that.getData();
    that.getpop_advert();
    that.getAdvert();
    that.getWithdrawaltips()
  },
  onShow () {
    wx.setNavigationBarColor({
      frontColor: "#ffffff", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#fff", //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });
    let that = this;
    wx.getSystemInfo({
      success: function (res) {
        console.log(res.statusBarHeight);
        that.status_top = res.statusBarHeight;
        //  console.log(that.status_top)
      }
    });

    that.getData();
    that.getAdvert();
  }
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f3f4f6;
  position: relative;
  // 弹窗样式
  .mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
  }
  .lineUp_mask {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .lineUp_pop {
      width: 75%;
      height: 334px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      background: rgba(255, 255, 255, 1);
      border-radius: 16px;
      padding-bottom: 18px;
      .title {
        box-sizing: border-box;
        height: 55px;
        padding: 0 5px;
        font-size: 17px;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 55px;
        border-bottom: 1px #ededed solid;
        text-align: center;
      }
      .content {
        flex: 1;
        margin: 16px;
        font-size: 13px;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 18px;
        overflow-y: auto;
        textarea {
          width: 100%;
          height: 100%;
        }
      }
      .btn_box {
        height: 36px;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0 20px;
        box-sizing: border-box;
        justify-content: space-between;
        span {
          width: 110px;
          height: 36px;
          border-radius: 22px;
          border: 1px solid rgba(204, 204, 204, 1);
          font-size: 13px;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          line-height: 36px;
          text-align: center;
          &.active {
            background: rgba(255, 128, 158, 1);
            border: 1px solid rgba(255, 128, 158, 1);
            color: #fff;
          }
        }
      }
    }
  }
  .Popup {
    width: 89.33%;
    height: 240px;
    position: absolute;
    top: 23%;
    left: 5%;
    background: #fff;
    border-radius: 20px;
    z-index: 10000;
    // font-family: PingFangSC-Medium, PingFang SC;
    padding: 20px 20px 0px;
    box-sizing: border-box;
    &.msg_Popup {
      padding-bottom: 20px;
    }
    .title {
      font-size: 18px;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      position: relative;
      .closeBtn {
        position: absolute;
        width: 20px;
        height: 20px;
        background: #dedede;
        top: -8px;
        right: -8px;
        text-align: center;
        line-height: 17px;
        border-radius: 50%;
        color: #fff;
      }
    }
    .describe {
      margin-top: 6px;
      font-size: 12px;
      color: #666;
      margin-bottom: 30px;
    }
    .sendBtn {
      width: auto;
      height: 18px;
      font-size: 12px;
      color: rgba(255, 115, 164, 1);
      position: absolute;
      top: 21.5%;
      right: 20px;
    }
    .inpbox {
      width: 100%;
      display: flex;
      flex-direction: row;
      height: 40px;
      margin: 36px 0px 8px;
      justify-content: space-between;
      position: relative;
    }
    .code-input-input {
      height: 40px;
      line-height: 40px;
      position: absolute;
      width: 300%;
      outline: none;
      color: transparent;
      text-shadow: 0 0 0 transparent;
      margin-left: -100%;
    }
    .code-input-main-item {
      width: 40px;
      height: 40px;
      color: rgba(51, 51, 51, 1);
      opacity: 0.8;
      line-height: 40px;
      text-align: center;
      padding-bottom: 0;
      font-size: 20px;
      background: rgba(243, 244, 246, 1);
      border-radius: 10px;
    }
    .text {
      text-align: center;
      color: rgba(255, 56, 62, 1);
      margin-bottom: 15px;
    }
    .p1 {
      width: 86%;
      font-size: 12px;
      color: rgba(153, 153, 153, 1);
      line-height: 16px;
      margin: 0 auto;
      text-align: center;
    }
    .p2 {
      margin-bottom: 30px;
    }
    .tips {
      font-size: 12px;
      color: rgba(255, 56, 62, 1);
      position: absolute;
      right: 20px;
      top: 39%;
    }
    .jb_inp {
      height: 24px;
      font-size: 16px;
      color: #a5b3b9;
      position: relative;
      box-sizing: border-box;
      padding-left: 24px;
      &.jb_inp1 {
        margin-bottom: 16px;
        color: #f5d040;
      }
      .icon {
        position: absolute;
        width: 18px;
        height: 18px;
        display: block;
        top: 2px;
        left: 0;
      }
      .inp {
        width: 101px;
        height: 24px;
        background: rgba(243, 244, 246, 1);
        border-radius: 5px;
        display: block;
        float: right;
        text-align: center;
        line-height: 24px;
        color: #333;
      }
      .inp1 {
        background: #fff;
      }
    }
    .confirm {
      position: absolute;
      bottom: 0;
      width: 89.3%;
      height: 40px;
      margin: 0 auto;
      color: rgba(51, 51, 51, 1);
      line-height: 40px;
      font-size: 14px;
      border-top: 1px solid #f5f5f5;
      text-align: center;
      &.confirm1 {
        color: #3eb0a9;
      }
    }
  }
  .ismask1 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10;
  }
  .isPopup1 {
    width: 80%;
    height: 100%;
    position: absolute;
    top: 19%;
    left: 10%;
    z-index: 99;
    .popimg {
      width: 100%;
      min-height: 1px;
      margin-bottom: 30px;
    }
    .closeBtn1 {
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      // position: absolute;
      // bottom: -50px;
      // left: 49%;
      // background: red;
      border-radius: 50%;
      font-size: 14px;
      border: 1px solid #fff;
      color: #fff;
      margin: 0 auto;
    }
  }

  .top {
    width: 100%;
    // height: 348px;
    // margin-top: 60px;
    box-sizing: border-box;
    position: relative;
    border-radius: 0px 0px 10px 10px;
    &.top1 {
      padding-top: 98px;
    }
    .bj {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
    .nav {
      width: 100%;
      height: 88px;
      margin-bottom: 10px;
      background: transparent;
      position: fixed;
      top: 0;
      z-index: 9999;

      &.nav1 {
        padding-top: 88px;
      }
      .backBtn {
        width: 10px;
        height: 16px;
        position: absolute;
        bottom: 0;
        left: 10px;
        padding: 14px 15px 14px 5px;
        .img {
          width: 100%;
          height: 100%;
        }
      }
      .navigate_title {
        position: absolute;
        bottom: 10px;
        font-size: 17px;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
      }
    }

    .jbbox {
      box-sizing: border-box;
      color: rgba(255, 255, 255, 1);
      color: #333;
      position: relative;
      z-index: 9999;
      top: 115px;
      &.jbbox1 {
        margin-bottom: 30px;
      }
      .top_main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        font-size: 15px;
        font-weight: 400;
        color: #ffffff;
        line-height: 20px;
        margin-bottom: 50px;
        .all_money {
          display: flex;
          flex-direction: column;
          .num {
            font-size: 30px;
            font-family: DIN-Bold, DIN;
            font-weight: bold;
            color: #ffffff;
            line-height: 36px;
            padding-top: 10px;
          }
          .card_btn {
            display: flex;
            flex-direction: row;
            align-items: center;
            &:last-child {
              margin-top: 23px;
            }
            img {
              width: 21px;
              height: 16px;
              margin-right: 9px;
            }
          }
        }
      }
      .money_box {
        padding: 0 8px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        box-sizing: border-box;
        .month_money {
          width: 170px;
          height: 99px;
          background: #ffffff;
          box-shadow: 0px 2px 4px 0px rgba(51, 51, 51, 0.1);
          border-radius: 8px;
          padding: 14px 10px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 22px;
          box-sizing: border-box;
          span {
            display: block;
            margin-top: 14px;
            font-size: 22px;
            font-family: DIN-Bold, DIN;
            font-weight: bold;
            color: #333333;
            line-height: 27px;
            -webkit-text-stroke: 1px #ffffff;
            text-stroke: 1px #ffffff;
          }
        }
      }
    }
  }
  .reward_main {
    padding-top: 107px;
  }
  .reward_box {
    box-sizing: border-box;
    margin-bottom: 20px;
    padding: 0 8px;
    height: 130px;
    background: #ffffff;
    box-shadow: 0px 4px 6px 0px rgba(51, 51, 51, 0.05);
    border-radius: 5px;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 29px;
      .left {
        display: flex;
        align-items: center;
      }
      .icon {
        width: 50px;
        height: 50px;
        position: relative;
        border-radius: 0px 0px 50px 5px;
        margin-right: 9px;
        &.tuijian {
          background: linear-gradient(135deg, #89eee9 0%, #4ebeb7 100%);
          img {
            width: 24px;
            height: 26px;
          }
        }
        &.shangcheng {
          background: linear-gradient(51deg, #89eee9 0%, #4ebeb7 100%);
          img {
            width: 22px;
            height: 25px;
          }
        }
        img {
          position: absolute;
          left: 8px;
          top: 10px;
        }
      }
      .jiantou {
        width: 6px;
        height: 10px;
      }
    }
    .infor {
      margin-top: 21px;
      display: flex;
      align-items: center;
      padding: 0 17px;
      box-sizing: border-box;
      justify-content: space-between;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 17px;
        span {
          padding-top: 5px;
          font-size: 18px;
          font-family: DIN-Bold, DIN;
          font-weight: bold;
          color: #333333;
          line-height: 22px;
          -webkit-text-stroke: 1px #ffffff;
          text-stroke: 1px #ffffff;
        }
      }
    }
  }
}
</style>

